<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="confirmExit">
        <text class="fa fa-chevron-left fa-gray"></text>
      </view>
      <text class="nav-title">试卷作答</text>
      <view class="nav-timer">
        <text class="timer-icon fa fa-clock-o"></text>
        <text class="timer-text">{{ timer }}</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view scroll-y class="content">
      <!-- 题目卡片 -->
      <view class="question-section">
        <view class="question-card">
          <view class="question-header">
            <view class="question-type">
              <text>单选题</text>
            </view>
            <text class="question-number"
              >第 {{ currentQuestion }}/{{ totalQuestions }} 题</text
            >
          </view>

          <view class="question-content">
            <text class="question-text">{{ questionData.question }}</text>
          </view>

          <view class="options-list">
            <view
              v-for="(option, index) in questionData.options"
              :key="index"
              :class="[
                'option-item',
                selectedAnswer === index ? 'option-selected' : '',
              ]"
              @tap="selectAnswer(index)"
            >
              <view class="option-radio">
                <text v-if="selectedAnswer === index">●</text>
              </view>
              <view
                :class="[
                  'option-label',
                  selectedAnswer === index ? 'option-label-selected' : '',
                ]"
              >
                <text>{{ String.fromCharCode(65 + index) }}</text>
              </view>
              <text
                :class="[
                  'option-text',
                  selectedAnswer === index ? 'option-text-selected' : '',
                ]"
              >
                {{ option }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <!-- 导航按钮 -->
      <view class="navigation-section">
        <view class="nav-card">
          <view class="nav-buttons">
            <view
              :class="[
                'nav-btn',
                'nav-prev',
                currentQuestion === 1 ? 'nav-btn-disabled' : '',
              ]"
              @tap="prevQuestion"
            >
              <text class="fa fa-chevron-left"></text>
              <text class="nav-btn-text">上一题</text>
            </view>
            <view class="nav-btn nav-next" @tap="nextQuestion">
              <text class="nav-btn-text">下一题</text>
              <text class="fa fa-chevron-right"></text>
            </view>
          </view>
        </view>
      </view>

      <!-- 答题卡 -->
      <view class="answer-sheet-section">
        <view class="sheet-card">
          <view class="sheet-header">
            <text class="sheet-title">答题卡</text>
            <view class="expand-btn" @tap="toggleExpand">
              <text class="expand-icon">
                <text class="fa fa-expand" v-if="!isExpanded"></text>
                <text class="fa fa-compress" v-else></text>
                <!-- {{ isExpanded ? "↑" : "↓" }} -->
              </text>
              <text class="expand-text">{{
                isExpanded ? "收起" : "展开"
              }}</text>
            </view>
          </view>

          <!-- 题目网格 -->
          <view class="answer-grid">
            <view
              v-for="(item, index) in isExpanded ? 60 : 10"
              :key="index"
              :class="['grid-item', getGridItemClass(index + 1)]"
              @tap="jumpToQuestion(index + 1)"
            >
              <text>{{ index + 1 }}</text>
            </view>
          </view>

          <!-- 图例 -->
          <view class="legend">
            <view class="legend-item">
              <view class="legend-dot legend-current"></view>
              <text class="legend-text">当前题</text>
            </view>
            <view class="legend-item">
              <view class="legend-dot legend-answered"></view>
              <text class="legend-text">已答</text>
            </view>
            <view class="legend-item">
              <view class="legend-dot legend-unanswered"></view>
              <text class="legend-text">未答</text>
            </view>
          </view>
        </view>
      </view>

      <view class="bottom-spacer"></view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="progress-info">
        <text class="progress-label">已答：</text>
        <text class="progress-count">{{ answeredCount }}</text>
        <text class="progress-total">/{{ totalQuestions }}</text>
      </view>
      <view class="submit-btn" @tap="confirmSubmit">
        <text class="submit-icon fa fa-send-o"></text>
        <text class="submit-text">交卷</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      timer: "59:35",
      seconds: 3575, // 59分35秒
      timerInterval: null,
      currentQuestion: 1,
      totalQuestions: 60,
      selectedAnswer: 2, // 当前题选中的答案（C选项，index为2）
      isExpanded: false,
      answers: {
        1: 2, // 第1题选了C（index 2）
        6: 0, // 第6题选了A
        9: 1, // 第9题选了B
        16: 2,
        29: 3,
      },
      questionData: {
        question: "以下哪项不属于脓毒症的主要临床表现？",
        options: [
          "发热或体温异常",
          "心率增快",
          "呼吸频率降低",
          "白细胞计数异常",
        ],
      },
    };
  },
  computed: {
    answeredCount() {
      return Object.keys(this.answers).length;
    },
  },
  onLoad() {
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0;
    this.startTimer();
  },
  onUnload() {
    if (this.timerInterval) {
      clearInterval(this.timerInterval);
    }
  },
  methods: {
    startTimer() {
      this.timerInterval = setInterval(() => {
        if (this.seconds > 0) {
          this.seconds--;
          const minutes = Math.floor(this.seconds / 60);
          const secs = this.seconds % 60;
          this.timer = `${String(minutes).padStart(2, "0")}:${String(
            secs
          ).padStart(2, "0")}`;
        } else {
          clearInterval(this.timerInterval);
          this.autoSubmit();
        }
      }, 1000);
    },
    selectAnswer(index) {
      this.selectedAnswer = index;
      this.answers[this.currentQuestion] = index;
    },
    prevQuestion() {
      if (this.currentQuestion > 1) {
        this.currentQuestion--;
        this.selectedAnswer =
          this.answers[this.currentQuestion] !== undefined
            ? this.answers[this.currentQuestion]
            : null;
      }
    },
    nextQuestion() {
      if (this.currentQuestion < this.totalQuestions) {
        this.currentQuestion++;
        this.selectedAnswer =
          this.answers[this.currentQuestion] !== undefined
            ? this.answers[this.currentQuestion]
            : null;
      }
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    },
    getGridItemClass(questionNum) {
      if (questionNum === this.currentQuestion) {
        return "grid-current";
      } else if (this.answers[questionNum] !== undefined) {
        return "grid-answered";
      } else {
        return "grid-unanswered";
      }
    },
    jumpToQuestion(questionNum) {
      this.currentQuestion = questionNum;
      this.selectedAnswer =
        this.answers[questionNum] !== undefined
          ? this.answers[questionNum]
          : null;
    },
    confirmExit() {
      uni.showModal({
        title: "退出考试",
        content: "确定要退出考试吗？已答题目将会保存。",
        confirmText: "退出",
        confirmColor: "#dc2626",
        success: (res) => {
          if (res.confirm) {
            uni.navigateBack();
          }
        },
      });
    },
    confirmSubmit() {
      const unanswered = this.totalQuestions - this.answeredCount;
      const message =
        unanswered > 0
          ? `还有${unanswered}题未作答，确定要交卷吗？`
          : "确定要交卷吗？";

      uni.showModal({
        title: "提交试卷",
        content: message,
        confirmText: "交卷",
        success: (res) => {
          if (res.confirm) {
            this.submitExam();
          }
        },
      });
    },
    submitExam() {
      if (this.timerInterval) {
        clearInterval(this.timerInterval);
      }
      uni.showToast({
        title: "提交成功",
        icon: "success",
        duration: 2000,
      });
      setTimeout(() => {
        uni.redirectTo({
          url: "/pages/exam-detail-submitted",
        });
      }, 2000);
    },
    autoSubmit() {
      uni.showToast({
        title: "考试时间到，自动提交",
        icon: "none",
        duration: 2000,
      });
      this.submitExam();
    },
  },
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f9fafb, #eff6ff);
  display: flex;
  flex-direction: column;
}

.nav-bar {
  height: 88rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-left {
  position: absolute;
  left: 32rpx;
}

.nav-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #111827;
}

.nav-timer {
  position: absolute;
  right: 32rpx;
  display: flex;
  align-items: center;
  gap: 8rpx;
  color: #dc2626;
}

.timer-icon {
  font-size: 28rpx;
}

.timer-text {
  font-size: 28rpx;
  font-weight: 500;
}

.content {
  flex: 1;
  padding-bottom: 160rpx;
}

.question-section {
  padding: 32rpx;
}

.question-card {
  background: #fff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #f3f4f6;
}

.question-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.question-type {
  background: #eff6ff;
  color: #1e40af;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.question-number {
  font-size: 28rpx;
  color: #6b7280;
}

.question-content {
  margin-bottom: 32rpx;
}

.question-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #111827;
  line-height: 1.6;
  display: block;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 24rpx;
  border-radius: 24rpx;
  border: 2rpx solid #e5e7eb;
  background: #fff;
  transition: all 0.3s;
}

.option-selected {
  border-color: #3b82f6;
  background: #eff6ff;
}

.option-radio {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 2rpx solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #3b82f6;
  flex-shrink: 0;
}

.option-selected .option-radio {
  border-color: #3b82f6;
  background: #3b82f6;
  color: #fff;
}

.option-label {
  background: #f3f4f6;
  color: #4b5563;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  font-weight: 500;
  flex-shrink: 0;
}

.option-label-selected {
  background: #3b82f6;
  color: #fff;
}

.option-text {
  font-size: 28rpx;
  color: #374151;
  flex: 1;
}

.option-text-selected {
  color: #1e40af;
  font-weight: 500;
}

.navigation-section {
  padding: 0 32rpx;
  margin-top: 32rpx;
}

.nav-card {
  background: #fff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #f3f4f6;
}

.nav-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rpx;
}

.nav-btn {
  flex: 1;
  height: 96rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  font-size: 28rpx;
  font-weight: 500;
}

.nav-prev {
  background: #f3f4f6;
  color: #6b7280;
}

.nav-next {
  background: #3b82f6;
  color: #fff;
}

.nav-btn-disabled {
  background: #f3f4f6;
  color: #d1d5db;
  pointer-events: none;
}

.nav-btn-icon {
  font-size: 28rpx;
}

.nav-btn-text {
  font-size: 24rpx;
}

.answer-sheet-section {
  padding: 0 32rpx;
  margin-top: 32rpx;
}

.sheet-card {
  background: #fff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #f3f4f6;
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32rpx;
}

.sheet-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
}

.expand-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  color: #2563eb;
  font-size: 24rpx;
}

.expand-icon {
  font-size: 24rpx;
}

.expand-text {
  font-size: 24rpx;
}

.answer-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 16rpx;
  margin-bottom: 32rpx;
}

.grid-item {
  /* width: 64rpx; */
  height: 60rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: 500;
}

.grid-current {
  background: #3b82f6;
  color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.3);
}

.grid-answered {
  background: #dcfce7;
  color: #15803d;
}

.grid-unanswered {
  background: #f3f4f6;
  color: #6b7280;
}

.legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48rpx;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.legend-dot {
  width: 32rpx;
  height: 32rpx;
  border-radius: 8rpx;
}

.legend-current {
  background: #3b82f6;
}

.legend-answered {
  background: #dcfce7;
  border: 1rpx solid #bbf7d0;
}

.legend-unanswered {
  background: #f3f4f6;
  border: 1rpx solid #e5e7eb;
}

.legend-text {
  font-size: 24rpx;
  color: #6b7280;
}

.bottom-spacer {
  height: 80rpx;
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  border-top: 1rpx solid #f3f4f6;
  padding: 24rpx 32rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
}

.progress-info {
  display: flex;
  align-items: center;
  gap: 4rpx;
}

.progress-label {
  font-size: 24rpx;
  color: #6b7280;
}

.progress-count {
  font-size: 28rpx;
  font-weight: 600;
  color: #16a34a;
}

.progress-total {
  font-size: 28rpx;
  color: #6b7280;
}

.submit-btn {
  padding: 16rpx 48rpx;
  border-radius: 24rpx;
  background: linear-gradient(to right, #10b981, #16a34a);
  display: flex;
  align-items: center;
  gap: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.3);
}

.submit-icon {
  font-size: 28rpx;
  color: #fff;
}

.submit-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #fff;
}
</style>
